<template>
  <view class="home u-flex-col">
    <u-navbar class="nav" title="筛选" :title-bold="true" back-icon-color="#333333" title-color="#000"></u-navbar>
    <view class="u-p-20 form">
      <u-form :model="form" ref="uForm">
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="在职状态">
          <chooseBtn :custom-box-style="customBoxStyle" ref="zzztRef" :custom-style="customBtnStyle" :list="postList"
            :listIsAll="postListIsAll" @reset="resetBoolean('在职')" :custom-check-style="customCheckStyle"
            @click="clickBtn('在职', $event)"></chooseBtn>
        </u-form-item>
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="工种类别">
          <chooseBtn ref="gzRef" class="gznb" :custom-box-style="customBoxStyle" :custom-style="customBtnStyle"
            :list="workList" :listIsAll="workListIsAll" @reset="resetBoolean('工种')" :custom-check-style="customCheckStyle"
            @click="clickBtn('工种', $event)"></chooseBtn>
        </u-form-item>
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="合同状态">
          <chooseBtn ref="htRef" :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="contractList"
            :listIsAll="contractListIsAll" @reset="resetBoolean('合同')" :custom-check-style="customCheckStyle"
            @click="clickBtn('合同', $event)"></chooseBtn>
        </u-form-item>
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="入职日期">
          <div class="time-body">
            <uni-datetime-picker type="date" :border="false" placeholder="请选择开始日期" :start="start" :end="end"
              v-model="form.startEntryDate" />
          </div>
        </u-form-item>
        <u-form-item :border-bottom="false" label-position="top">
          <div class="time-body">
            <uni-datetime-picker type="date" :border="false" placeholder="请选择结束日期" :start="start" :end="end"
              v-model="form.endEntryDate" />
          </div>
        </u-form-item>
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="合同到期日期">
          <div class="time-body">
            <uni-datetime-picker type="date" :border="false" placeholder="请选择开始日期" :start="contractStart"
              :end="contractEnd" v-model="form.startAgreement" />
          </div>
        </u-form-item>
        <u-form-item :border-bottom="false" label-position="top">
          <div class="time-body">
            <uni-datetime-picker type="date" :border="false" placeholder="请选择结束日期" :start="contractStart"
              :end="contractEnd" v-model="form.endAgreement" />
          </div>
        </u-form-item>
      </u-form>
    </view>
    <view class="confrim-btn u-flex u-row-between u-p-t-20">
      <u-button :hair-line="false" shape="circle" form-type="reset" :custom-style="formCustomStyle" throttle-time="500"
        @click="reset">重置</u-button>
      <u-button :hair-line="false" shape="circle" :custom-style="formSubmitStyle" form-type="submit" throttle-time="500"
        @click="submit">确定</u-button>
    </view>

  </view>
</template>

<script>
import chooseBtn from '@/pages/components/chooseBtn'

export default {
  name: 'screen',
  components: {
    chooseBtn
  },
  data () {
    return {
      form: {
        startEntryDate: '',
        endEntryDate: '',
        startAgreement: '',
        endAgreement: ''
      },
      // 按钮组组件数据，数据checked是是否选中的，默认false布尔值，必填，label也是必填
      postList: [// 在职状态
        {
          label: '在职',
          checked: false,

          id: '0'
        },
        {
          label: '离职',
          checked: false,

          id: '1'
        }
      ],
      workList: [// 工种类别	
        {
          label: '安全管理人员',
          checked: false,
          id: '001'
        },
        {
          label: '特种作业人员',
          checked: false,
          id: '002'
        },
        {
          label: '井下作业人员',
          checked: false,
          id: '003'
        },
        {
          label: '地面作业人员',
          checked: false,
          id: '004'
        },
        {
          label: '五职人员',
          checked: false,
          id: '005'
        }
      ],
      contractList: [// 合同状态
        {
          label: '未上传',
          checked: false,

          id: '0'
        },
        {
          label: '未过期',
          checked: false,

          id: '1'
        },
        {
          label: '已过期',
          checked: false,

          id: '2'
        }
      ],
      start: '',
      end: '',
      contractStart: '',
      contractEnd: '',
      postListIsAll: true,
      workListIsAll: true,
      contractListIsAll: true,

      // 按钮组组件样式
      customBoxStyle: {
        justifyContent: 'space-start'
      },
      customBtnStyle: {
        background: '#F1F5F3',
        padding: '0rpx 20rpx',
        marginRight: '20rpx',
        borderRadius: '32rpx',
        fontWeight: 400,
        color: '#666666'
      },
      customCheckStyle: {
        background: '#5BAC844D',
        padding: '0rpx 20rpx',
        marginRight: '20rpx',
        borderRadius: '32rpx',
        border: '1px solid #5BAC84',
        fontWeight: 400,
        color: '#5BAC84'
      },
      labelStyle: {
        color: '#333333',
        fontWeight: '600'
      },
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: '#333333',
        background: '#F1F5F3',
        borderRadius: '20rpx',
        width: '40%',
        border: 'none'
      },
      submitStyle: {
        color: '#333333',
        background: '#5BAC84',
        borderRadius: '20rpx',
        width: '40%',
        border: 'none'
      },

      formCustomStyle: {
        color: '#333333',
        background: '#F1F5F3',
        width: '40%',
        border: 'none'
      },
      formSubmitStyle: {
        color: '#ffffff',
        background: '#5BAC84',
        width: '40%',
        border: 'none'
      },
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady () {

  },
  mounted () {


  },

  methods: {
    resetBoolean (name) {// 是否全选
      switch (name) {
        case '在职':
          this.postListIsAll = false;
          break;
        case '工种':
          this.workListIsAll = false;
          break;
        case '合同':
          this.contractListIsAll = false;
          break;
        default:
          break;
      }
    },
    clickBtn (name, res) {
      console.log('eth', name, res);
    },
    submit () {
      const obj = {
        isQuit: this.postList.filter(el => el.checked).map(el => el.id).join(','),
        workTypeCategory: this.workList.filter(el => el.checked).map(el => el.id).join(','),
        agreementStatus: this.contractList.filter(el => el.checked).map(el => el.id).join(','),
      }
      const params = {
        ...this.form,
        ...obj
      }
      uni.$emit(this.emitEvent, params)
      uni.navigateBack({
        delta: 1
      })
    },
    reset () {
      this.form.startEntryDate = ''
      this.form.endEntryDate = ''
      this.form.startAgreement = ''
      this.form.endAgreement = ''

      this.$refs.zzztRef.isAll = false
      this.$refs.zzztRef.chooseAll()
      this.postListIsAll = true

      this.$refs.gzRef.isAll = false
      this.$refs.gzRef.chooseAll()
      this.workListIsAll = true

      this.$refs.htRef.isAll = false
      this.$refs.htRef.chooseAll()
      this.contractListIsAll = true
    },
    init (obj) {
      if (obj.isQuit) {
        const arr = obj.isQuit.split(',')
        this.postList.forEach(el => {
          if (arr.includes(el.id)) {
            el.checked = true
          }
        });
      }

      if (obj.workTypeCategory) {
        const arr = obj.workTypeCategory.split(',')
        this.workList.forEach(el => {
          if (arr.includes(el.id)) {
            el.checked = true
          }
        });
      }

      if (obj.agreementStatus) {
        const arr = obj.agreementStatus.split(',')
        this.contractList.forEach(el => {
          if (arr.includes(el.id)) {
            el.checked = true
          }
        });
      }
    }
  },

  onLoad (options) {
    const { form, emitEvent } = options
    const obj = JSON.parse(form)
    this.form = { ...this.form, ...obj }
    this.emitEvent = emitEvent
    this.init(this.form)
  },

}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  .form {
    // z-index: 999;
    box-shadow: 0px -3px 3px #f5f5f5;
    padding-bottom: 160rpx !important;

    /deep/.u-input {
      .u-input__right-icon--select {
        display: none;
      }
    }
  }

  .popup-content {
    padding: 24rpx;
    text-align: center;

    .checkbox {
      &-item {
        height: 100rpx;
      }

      /deep/.u-checkbox-group {
        display: inline;

        .u-checkbox {
          border-bottom: 1px solid #dddddd;
          justify-content: space-between;
          flex-flow: row-reverse;

          .u-checkbox__icon-wrap {
            background: rgba(1, 72, 51, 0.2);
            border: none;
          }
        }
      }

      /deep/.u-radio-group {
        display: inline;

        .u-radio {
          border-bottom: 1px solid #dddddd;
          justify-content: space-between;
          flex-flow: row-reverse;

          .u-radio__icon-wrap {
            background: rgba(1, 72, 51, 0.2);
            border: none;
          }
        }
      }
    }
  }

  .confrim-btn {
    position: fixed;
    width: 100%;
    bottom: 0rpx;
    z-index: 1;
    background: #fff;
    padding-bottom: 50rpx;
  }
}

.time-body {
  position: relative;
  width: 100%;
}

/deep/ .gznb {
  .tag {
    margin-top: 1em
  }
}
</style>
